<template>
	<div>
      <!-- <div class="container"> -->
		<div class="handle-box">
			<!-- <label class="label" >专业方向：</label> -->
			<el-input class="handle-input" v-model="headerData.testPaperName" placeholder="试卷名称"/>
			<!-- <label class="label" >状态：</label> -->
			<el-select
			  v-model="headerData.state" 
				filterable
				allow-create
                placeholder="状态" 
			   >
				<el-option
					v-for="item in options.statuses"
					:key="item.value"
					:label="item.label"
					:value="item.value"
					/>
			</el-select>
			<el-select
			  v-model="headerData.classification" 
				filterable
				allow-create
                placeholder="分类"  
			   >
				<el-option
					v-for="item in options.classifications"
					:key="item.value"
					:label="item.label"
					:value="item.value"
					/>
			</el-select>
			<el-select
			  v-model="headerData.type" 
				filterable
				allow-create
                placeholder="类型" 
			   >
				<el-option
					v-for="item in options.types"
					:key="item.value"
					:label="item.label"
					:value="item.value"
					/>
			</el-select>
				<el-button color="#1c84c6" class="handle-btn"  @click="handleSearch">搜索</el-button>
			</div>
			<el-table ref="multipleTableRef" 
				:header-cell-style="{color:'#2A62BC'}"
			 	:data="tableData"   
			 	style="width: 100%;" 
                size="small"
                border
				@selection-change="handleSelectionChange">
                <el-table-column   type="selection" width="35" />
				<el-table-column  prop="testPaperName" label="试卷名称"  align="center">
					<template #default="scope">
					<p> <i class="iconfont icon-list-alt3 "></i>{{ scope.row.testPaperName }}</p>	
					</template>
				</el-table-column>
				<el-table-column  prop="citations" label="引用次数"  align="center">
					<template #default="scope">
					<p>
						<el-tooltip content="点我看详情" placement="bottom" effect="light">
						<a class="test-success"  @click="catDetail(scope.row)">{{ scope.row.citations }}</a>
					</el-tooltip>
						次
					</p>
					</template>
				</el-table-column>
                <el-table-column label="状态" align="center">
                    <template #default="scope">
                        <el-switch
                                v-model="scope.row.state"
                                :active-value="'启用'"
                                :inactive-value="'禁用'"
                                active-color="#64bd63"
                                inactive-color="#c0c0c0"
                                
                                @change="changeSwitch(scope.row.state)"/>
					</template>
                </el-table-column>
				<el-table-column   label="类型" align="center">
					<template #default="scope">
						<i class="iconfont icon-random1"  v-if="scope.row.type==0"></i>
						<i class="iconfont icon-tasks4 " v-else></i>
					</template>
				</el-table-column>
				<el-table-column prop="classification" label="分类" align="center"></el-table-column>
				<el-table-column  label="总分" align="center">
					<template #default="scope">
						<a class="test-success" v-if="scope.row.totalScore>=80">{{ scope.row.totalScore}}</a>
						<a class="test-waring" v-else-if="scope.row.totalScore>=60">{{ scope.row.totalScore}}</a>
						<a class="test-danger" v-else>{{ scope.row.totalScore}}</a>
					</template>
				</el-table-column>
                <el-table-column label="最后修改时间" align="center">
					<template #default="scope">
					<p>{{  scope.row.modifier }}</p>	
					<p style="color:#888888; font-weight: 100;">{{ scope.row.lastModifiedTime }}</p>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="220" align="center" >
					<template #default="scope">
						<el-button-group class="right-btn">
							<el-tooltip content="查看" placement="bottom" effect="light">
						    <el-button   @click="lookPaper(scope.row)" >
                                <i class="iconfont icon-eye1 "></i></el-button>
							</el-tooltip>
							<el-tooltip content="修改" placement="bottom" effect="light">
						    <el-button  style="color: #1c64c6; font-family: 900;" :icon="Edit" @click="open(scope.$index,scope.row)" >
                              </el-button>
							</el-tooltip>
							<el-tooltip content="删除" placement="bottom" effect="light">
				            <el-button  style="color: #Ed5565; font-family: 900;" :icon="Delete" @click="handleDelete(scope.$index)">
                            </el-button>
						</el-tooltip>
						</el-button-group>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div class="pagination">
				<el-pagination
				:current-page="query.pageIndex"
					:page-size="query.pageSize"
					:page-sizes="[5, 10, 15, 20]"
					size="small"
					layout="total, sizes, prev, pager, next, jumper"
					:total="pageTotal"
					@size-change="handleSizeChange"
					@current-change="handlePageChange"/>
			</div>
	</div>
		<!--引用次数点我看详情的弹出框 -->
		<el-dialog v-model="citationsVisible" width="650" >
			<template #header="{ close, titleId, titleClass }">
			<div class="my-header">
				<h4 :id="titleId" :class="titleClass">关联的考试</h4> 
			</div>
			</template>
			<CitationPaper v-model:testPaperName="testPaperName01"></CitationPaper>
		</el-dialog>
		<!--试卷预览的弹出框 -->
		<el-dialog v-model="paperVisible"  width="68%"  style="height: 60%; overflow-y: scroll;" :destroy-on-close="true"   :show-close="false" :fullscreen="isFullScreen">
			<template #header="{ close, titleId, titleClass }">
				<div class="my-header">
				<span :id="titleId" :class="titleClass">试卷预览</span>
                <el-button-group>
                    <!-- <el-button text><i class="iconfont icon-suoxiao"></i></el-button> -->
                    <el-button text v-if="isFullScreen" @click="isFullScreen=!isFullScreen"><i class="iconfont icon-huifu" ></i></el-button>
                    <el-button text v-else  @click="isFullScreen=!isFullScreen"><i class="iconfont icon-ic_fullscreen" ></i></el-button>
                    <el-button  text @click="close"><i class="iconfont icon-close2"></i></el-button>
            </el-button-group>
			</div>
			</template>
			<div v-for="item in questionTypes" :key="item">
			<div class="types" v-if="item.len>0">
					<p name="question_types">&nbsp;&nbsp;&nbsp;{{ item.type }}</p>
			</div>
			<TestShow :data="item.detailData" :id="paperId"  :flag="flag"></TestShow>
			</div>

			<!-- <el-form  label-width="80" class="form-item" disabled>
			  <el-form-item label="试卷名称">
				<el-input v-model="paperForm.testPaperName"></el-input>
			  </el-form-item>
			  <el-form-item label="试卷状态">
				<el-input v-model="paperForm.state" style="color: #1c64c6;"></el-input>
			</el-form-item>
			  <el-form-item label="试卷总分">
				<el-input v-model="paperForm.totalScore"></el-input>
			  </el-form-item>
			  <el-form-item label="章节设置">
				<div class="panel-heading">
                    <strong>章节名称：</strong><a style="color: #1c64c6;">{{ paperForm.nameSection }}</a>
                </div>
				<el-descriptions
					direction="vertical"
					:column="5"
					style="width: 85%;"
					border>
					<el-descriptions-item label="题库" align="center">
						
						<el-tag size="small">{{ paperForm.questionBank }}</el-tag>
					</el-descriptions-item>
					<el-descriptions-item label="题型" align="center" >{{ paperForm.topic }}</el-descriptions-item>
					<el-descriptions-item label="难度" align="center" >{{ paperForm.difficulty }}</el-descriptions-item>
					<el-descriptions-item label="题目数量" align="center" >{{ paperForm.titleNumber }}</el-descriptions-item>
					<el-descriptions-item label="单体分值" align="center">{{ paperForm.singleTopicScore }}</el-descriptions-item>
				</el-descriptions>
				
				
			  </el-form-item>
			</el-form> -->
			<template #footer>
				<span class="dialog-footer">
					<el-button color="#0ab394" @click="paperVisible = false">关闭</el-button>
				</span>
			</template>
		</el-dialog>
		

		<!-- </div> -->
	<!-- </div> -->
</template>

<script setup >
import { ref, reactive,toRefs } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
import { getPaperK,getMPaperTests} from '../../../api/exam' ;
import CitationPaper from './CitationPaper.vue'
import TestShow from '../examSubVue/TestShow.vue';
const userName = localStorage.getItem('ms_username')
/*--------头部数据--------*/
const headerData  = reactive({
	testPaperName:'',
	state:'',
	classification:'',
	type:''

})

const options = reactive({
statuses:[
	{
		value: '状态',
		label: '状态',
 	 },
  {
    value: '正常',
    label: '正常',
  },
  {
    value: '禁用',
    label: '禁用',
  },
  ],
  classifications:[
	{
		value: '统考',
		label: '统考',
 	 },
  {
    value: '个人能力考试',
    label: '个人能力考试',
  },
  {
    value: '政策',
    label: '政策',
  },
  ],
  types:[
  {
    value: '普通试卷',
    label: '普通试卷',
  },
  {
    value: '随机试卷',
    label: '随机试卷',
  },
  ]
}
)
	
//分页字体
const small = ref(true)

//分页数据
const query = reactive({
	pageIndex: 1,
	pageSize: 5,
});
//

//表格数据
const tableData = ref();
//总页数
const pageTotal = ref(0);
const multipleTableRef = ref()
const state = reactive({
	multipleSelection:[]
})

// 获取表格数据  分页是数据截取  后台结合一起后  直接返回分页的后的数据
const getData = () => {
    getPaperK({pageCurrent:query.pageIndex,pageSize:query.pageSize}).then(res=>{
        console.log(res,"---res---")
        // tableData.value = res.data.
		let start  = (query.pageIndex-1)*query.pageSize;//开始位置
        let end =query.pageIndex*query.pageSize  ;//结束位置 数组的截取的时候 [start,end) suo所以不用-1
        tableData.value = res.data.slice(start,end);
        // tableData.value = res.data;
        pageTotal.value = res.data.length
    })
	
};
getData();
//多选框权限
const handleSelectionChange = (val) => {
  state.multipleSelection = val
}
// 分页导航
const handleSizeChange = (val) => {
  // console.log(`${val} items per page`)
  query.pageSize = val;
  getData()
}
const handlePageChange = (val) => {
	query.pageIndex = val;
	console.log(val,"==")
	console.log(query.pageSize)
	getData()
};


//是够启用调用后台接口
const  changeSwitch=(status)=>{
    //调用后台修改接口
    console.log(status,'>>>status');
}

// 删除单个操作
const handleDelete = (index) => {
	// 二次确认删除
	ElMessageBox.confirm('确定要删除吗？', '提示', {
		type: 'warning'
	})
	.then(() => {
		ElMessage.success('删除成功');
		//to 传递id 到后台 
		tableData.value.splice(index, 1);
		// 删除成功后
		// getData()
	})
	.catch(() => {});
};

// 查询操作  to... 需要自己实现与后台交互
const handleSearch = () => {
	query.pageIndex = 1;
	getData();
};



// 点击修改
const emit  = defineEmits(['sendRowData','update:my'])
const open  = (index,row)=>{//index是时间源对象
	emit('sendRowData',row)
	
}

/***-------引用次数 点我看详情 弹窗----------- */
const citationsVisible=ref(false)
const testPaperName01=ref('')
const catDetail=(row)=>{
	testPaperName01.value=row.testPaperName
	citationsVisible.value=true
} 

/***-------试卷预览---------*/
const paperVisible=ref(false)
const paperForm =reactive({
	testPaperName:'',
	state:'',
	totalScore:'',
	questionBank:'',
	nameSection:'',//章名称
	topic:'',//题型
	difficulty:'',//难度
	titleNumber:'',
	singleTopicScore:''
})
//试卷id 
   /****定义题型 */
const questionTypes=ref([])
const testData = ref({})
const paperId = ref()
const flag = ref(3)//试卷预览
const  lookPaper= async (row)=>{
	paperId.value=row.id
	//获取试卷数据
	const {data} =await getMPaperTests({paperId})
    console.log('papaerTest信息：',data)
    testData.value= data
    let data1 = []
    data1.push(
		 {type:'单选题',len:data.dx.length,detailData:data.dx},
        {type:'填空题',len:data.tk.length,detailData:data.tk},
        {type:'名词解释',len:data.mc.length,detailData:data.mc},
        {type:'论述题',len:data.ls.length,detailData:data.ls},
        {type:'编程题',len:data.bc.length,detailData:data.bc},
     )
    questionTypes.value=data1
    console.log(questionTypes)
    

	// paperForm.testPaperName=row.testPaperName
	// paperForm.state=row.state
	// paperForm.totalScore=row.totalScore
	// paperForm.questionBank=row.questionBank
	// paperForm.nameSection=row.nameSection
	// paperForm.topic=row.topic
	// paperForm.difficulty=row.difficulty
	// paperForm.titleNumber=row.titleNumber
	// paperForm.singleTopicScore=row.singleTopicScore
	paperVisible.value=true
}
//是否全屏
const  isFullScreen = ref(true)
</script >
<style lang="less" scoped>
.handle-box {
	margin-bottom: 20px;   
	.handle-btn{
		margin-left: 10px;
	}
}

.el-select {
	width: 150px;
	margin-right: 10px;  
}

.handle-input {
	width: 200px;
    margin-right: 10px;
}

.mr10 {
	margin-right: 10px;
}


.top-btn{
	float: right;
	.el-button{
		margin-left: 5px;
	}
}
.right-btn{
 	justify-content:center;
	.el-button{
		height: 22px;
		// width: 60px;
		margin-right: 10px;
		padding: 1px 5px;
	}
}
.test-success{
	font-size: 20px;
	color: #1c84c6;
	font-weight: 700;
}

.test-waring{
	font-size: 20px;
	color: #F8AC59;
	font-weight: 700;
}
.test-danger{
	font-size: 20px;
	color: #ED5565;
	font-weight: 700;
}

.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px  solid #f0f0f0;
}

.form-item /deep/.el-form-item__label{
	color:#676A6C;
	font-weight: bold;
	font-size: 13px;
}
.form-item .el-input{
	width: 85%;
}
.panel-heading{
	color: #333;
	background-color: #f5f5f5;
	border-color: #ddd;
	width: 85%;
}
:deep(.my-content) {
  background: var(--el-color-danger-light-9); 
  color:red;
}
</style>